<template>
    <div>
       <div :style="{backgroundImage:`url(${sellerIofo.avatar})`}" class="biejing">
         <div class="mska">
            <div><img :src="sellerIofo.avatar" alt=""></div>
            
            <div class="mlif">
                <p class="top"> <span class="ping">品牌</span>  {{sellerIofo.name}}</p>
                <p class="cen">{{sellerIofo.description}}/{{sellerIofo.deliveryTime}}分钟到达</p>
                <p class="but"><span class="jian">减</span> </p>
            </div>
            <div class="gong"><p>{{sellerIofo.bulletin}}</p><span>></span></div>
         </div>
        
    </div>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
    export default {
        data(){
            return{}
        },
        created() {
    this.getSeller();
  },
        computed: {
    ...mapState(["sellerIofo"]),
  },
  methods: {
    ...mapActions(["getSeller", "getGoods"]),
  },
           
    }
</script>

<style  scoped>
 .biejing{
    height: 134px;
  background: #333;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
 }
 .mska{
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    height: 100%;
    background-color: rgba(7, 17, 27, 0.5);
    backdrop-filter: blur(10px);
    padding-left: 24px;
    padding-top: 24px;
     display: flex;
     box-sizing: border-box;
 }
 img {
        width: 75px;
      }
.mlif{
    margin-left: 16px;
}
.mlif>.top{
    font-size: 16px;
    color: rgb(225,255,255);
    font-weight: bold;
    line-height: 18px;
}
.mlif>.cen{
    font-size: 12px;
    color: rgb(225,255,255);
    font-weight: 200;
    line-height: 12px;
    margin-top: 8px;
    margin-bottom: 10px;
}
.mlif>.but{
    font-size: 10px;
    color: rgb(225,255,255);
    font-weight: 200;
    line-height: 12px;
}
.ping{
    display: inline-block;
    background-color: red;
    padding: 3px;
    margin-top: 6px;
}
.jian{
    padding: 2px;
    background-color: white;
    color: orangered;
    font-weight: bolder;
}
.gong{position: absolute;
   
    bottom: 0px;
    left: 0;
    width: 100%;
    font-size: 10px;
    color: #fff;
    padding-left: 12px;
    background: rgba(7, 17, 27, 0.2);
    
}
.gong>p{
      height: 28px;
      line-height: 28px;
      width: 85%;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
}
.gong>span{
    position: absolute;
    right: 36px;
    bottom: 5px;
    font-size: 16px;
}

</style>